<template>
    <div>
      <h1>我的订单</h1>
      <el-scrollbar height="500px">
        <div>
        <el-card shadow="hover" v-show="item.status!=0" v-for="item in list" :key="item.id" style="margin-bottom: 15px;">
          <div style="display: flex; justify-content: space-between;">
            <span>订单编号：{{ item.id }}</span>
            <span>下单时间：{{ item.createTime }}</span>
          </div>
          
          <div style="margin: 10px 0;">
            <div>商品名称：{{ item.name }}</div>
            <div>购买数量：{{ item.amount }}</div>
            <div>商品总价：¥{{ item.total }}</div>
          </div>
          
          <div style="margin: 10px 0;">
            <div>收货人：{{ item.username }}</div>
            <div>收货地址：{{ item.address }}</div>
          </div>
          
          <div style="display: flex; justify-content: space-between; align-items: center;">
            <div>实付金额：¥{{ item.total }}</div>
            <div>
                <el-button type="danger" v-show="item.status==1" @click="cancelOrder(item.id)">取消订单</el-button>
                <el-button type="danger" v-show="item.status==10" disabled>等待商家确认</el-button>
                <el-button v-if="item.status==2" type="primary" @click="plain(item.id)" plain>确认收货</el-button>
                <el-button type="success" v-show="item.status==20" disabled>订单已完成</el-button>
            </div>
          </div>
        </el-card>
      </div> 
      </el-scrollbar>

    </div>
  </template>

<script setup>
import { ElMessage } from 'element-plus'
import { ref, onMounted } from 'vue'
import axios from 'axios'
import qs from 'qs'


//初始加载
onMounted(() => {
    loadOrder()
})
//获取订单列表
const list = ref([])
//获取用户信息
const user = getUser()
//获取订单功能
const loadOrder = () => {
    console.log(user.id)
    axios.get(BASE_URL+'/v1/order/list?userId='+user.id).then((response)=>{
            if (response.data.code==2000){
                list.value = response.data.data
                console.log(list.value)
            }else{
                ElMessage.error(response.data.msg)
            }
        })
}
const cancel = ref({
    id: '',
    status: ''
})
//取消订单
const cancelOrder = (id) => {
    cancel.value.status = '10'
    cancel.value.id = id
    let data = qs.stringify(cancel.value)
    axios.post(BASE_URL+'/v1/order/cancel',data).then((response)=>{
        if (response.data.code==2000){
            ElMessage.success('提交成功,等待结果')
            loadOrder()
        }else{
            ElMessage.error(response.data.msg)
        }
    })
}
//确认收货
const plain = (id) => {
    cancel.value.status = '20'
    cancel.value.id = id
    let data = qs.stringify(cancel.value)
    axios.post(BASE_URL+'/v1/order/cancel',data).then((response)=>{
        if (response.data.code==2000){
            ElMessage.success('提交成功,等待结果')
            loadOrder()
        }else{
            ElMessage.error(response.data.msg)
        }
    })
}
</script>


<style scoped>

</style>